<template>
  <div class="login-wrap">
    <div class="ms-describe">
      <div class="ms-logo">
        <img src="~@/assets/img/logo1.png"/>
      </div>
      <div class="ms-logotitle">
        <div class="ms-logotitile-up">
        太仓市
          <span>“标准地”</span>三维动态监管平台
        </div>
        <div class="ms-logotitile-down">
        <span>建立起政企互信+企业诚信，以诚信为桥梁架起一座高速通道</span>
        </div>
      </div>

    </div>
    <div class="ms-login">
      <div class="ms-title">用户登录</div>
      <el-form  label-width="0px" class="ms-content">
        <el-form-item prop="username">
          <el-input  v-model="login.name" placeholder="请输入用户名">
            <template #prepend>
              <el-icon>
                <User/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input  v-model="login.password" placeholder="请输入密码" type="password">
            <template #prepend>
              <el-icon>
                <Unlock/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm()">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, ref, getCurrentInstance} from "vue";
import {useRouter} from "vue-router";
import {ElNotification} from "element-plus";
import {User,Unlock} from '@element-plus/icons-vue'
export default defineComponent({
  name: "Home",
  components:{User,Unlock},
  setup() {
    const {appContext} = getCurrentInstance();
    const login = reactive({
      name: '',
      password: ''
    })
    const router = useRouter()
    const isLogin = ref(false)
    const submitForm = () => {
      appContext.config.globalProperties.axios({
        url: `api/checkUser?name=${login.name}&password=${login.password}`,
        method: 'get',
      }).then((response) => {
        isLogin.value = response.data
        if (isLogin.value) {
          localStorage.setItem("loginName", login.name);
          localStorage.setItem("passWord", login.password);
          sessionStorage.setItem("loginName", login.name)
          router.push({
            name: "landpoint",
          })
        } else {
          ElNotification({
            showClose: true,
            message: '登录密码不正确，请重新输入',
            type: 'warning',
          })
        }
      })

    }
    const userOption = [
      {
        value: '太仓市土地储备中心',
      },
      {
        value: '太仓市权益利用科',
      },
      {
        value: '资规城厢分局',
      },
      {
        value: '资规高新分局',
      },
      {
        value: '资规浏河分局',
      },
      {
        value: '资规国开分局',
      },
      {
        value: '资规璜泾分局',
      },
      {
        value: '资规沙溪分局',
      },
      {
        value: '资规双凤分局',
      },
      {
        value: '资规港区分局',
      },
    ]
    return {
      submitForm,
      userOption,
      login
    }
  }
})
</script>

<style scoped>
.login-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url(../assets/img/bg2.jpg);
  background-size: 100%;
}

.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}

.ms-login {
  position: relative;
  left: 70%;
  top: 60%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
/* .ms-logo{
  position: absolute;
  width: 48px;
  height: 32px;
  left: 36px; 
  background-image: url(../assets/img/logo1.png) ;  
} */

.ms-describe {
    position: relative;
    left: 30%;
    top: 60%;
    height: 8vw;
    margin: -9.89583vw 0 0 -9.11458vw;
    display: flex;
    color: white;
}
.ms-logo{
  display: flex;
}
.ms-log img{
  display: block;
  width: 100%;
  height: 100%;
}
.ms-logotitle{
  position: relative;
  display: flex;
      flex-direction: column;
    top: 1vw;

    font-family: 'YouSheBiaoTiHei', monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: #FFFFFF;
    margin-left: 5px;
}
.ms-logotitile-up{
  font-size: 28px;
}
.ms-logotitile-down{
  margin-top: 10px;
  font-size: 18px;
}

.ms-content {
  padding: 30px 30px;
}

.login-btn {
  text-align: center;
}

.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}

.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
</style>
